/**
 * @author: 刘凯利
 * @day: 2022.2.11
 */
import { constantRoutes } from '@/router'
//! 获取的用户权限合集
import { getrolesList } from '@/api/user'
import { Message } from 'element-ui'
import Layout from '@/layout'
/**
 * Use meta.role to determine if the current user has permission
 * @param roles
 * @param route
 */
// function hasPermission (roles, route) {
//   if (route.meta && route.meta.roles) {
//     return roles.some(role => route.meta.roles.includes(role))
//   } else {
//     return true
//   }
// }

/**
 * @param 获取后端分配好的路由权限替换简键名渲染路由
 * @param routes
 * @param roles
 */
export function filterAsyncRoutes (routes, data) {
  data.forEach(item => {
    // 截取最后/的内容
    const name = item.page_key.substring(item.page_key.lastIndexOf('\/') + 1, item.page_key.length)
    const menu = {
      // 页面路径
      path: item.page_key,
      // 判断是是否为菜单 resolve必须要加
      component: item.is_leaf === 0 ? Layout : resolve => { require(['@/views' + item.page_key], resolve) },
      // name截取后取首位大写
      name: name.slice(0, 1).toUpperCase() + name.slice(1),
      // 判断是否可在面包屑打开
      redirect: item.is_leaf === 0 ? 'noRedirect' : '',
      // 判断是否隐藏
      hidden: item.type === 2 ? 1 : 0,
      // 是否唯一显示(有待配置)
      alwaysShow: false,
      // meta中的内容
      meta: {
        title: item.name,
        icon: item.icon
      },
      // 准备子节点容器
      children: []
    }
    // 判断是否含有子节点
    if (item.children) {
      // 如果含有子节点 提取出子节点容器 并拿到数据的子节点再次进行添加
      filterAsyncRoutes(menu.children, item.children)
    }
    // 添加到路由合集中
    routes.push(menu)
  })
  // 返回整理好的动态路由数据
  return routes
}

const state = {
  routes: [],
  // 动态路由的权限
  addRoutes: [],
  // 元素(按钮)的权限
  roles: []
}

const mutations = {
  // 元素权限
  SET_ROLES: (state, roles) => {
    state.roles = roles
  },
  // 路由权限
  SET_ROUTES: (state, routes) => {
    state.addRoutes = routes
    // 把过滤出来有权限的路由添加到不需要权限的路由里面去
    state.routes = constantRoutes.concat(routes)
    console.log(state.routes)
  }
}

const actions = {
  /**
   * @param 获取后端筛选好的动态路由
   */
  generateRoutes ({ commit }, state) {
    return new Promise((resolve, reject) => {
      // 存的是有权限的路由，是一个数组
      getrolesList().then(res => {
        console.log('3.获取用户权限路由')
        // 声明一个变量 接收方法返回的动态路由
        let accessedRoutes
        if (res.code == 200 || res.code == 20000) {
          //! 储存元素权限
          const roles = res.data[1].permission_list
          // 把元素(按钮)权限储存到session中
          sessionStorage.setItem('codeList', JSON.stringify(roles))
          // 在Vuex中储存元素权限
          commit('SET_ROLES', roles)
          //! 遍历路由权限
          // 设置空的数组 传递给方法
          const ret = []
          // 给对象套个数组 遍历需要
          const dataList = []
          dataList.push(res.data[0])
          // 把动态路由遍历后储存
          accessedRoutes = filterAsyncRoutes(ret, dataList)
          // 还缺少404页面 单独配置并push到动态路由中
          const asyncRoutes = { path: '*', redirect: '/404', hidden: true }
          // 把404页面push到动态路由里面 (注意一定要加到末尾 不能使用unshift)
          accessedRoutes.push(asyncRoutes)
        } else {
          Message.error('获取路由失败')
        }
        // 在Vuex中储存动态路由
        commit('SET_ROUTES', accessedRoutes)
        // 返回动态路由
        resolve(accessedRoutes)
      }).catch(error => {
        reject(error)
      })
    })
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}
